<!--
 * @Description: 增长率
 * @Author: Ronda
 * @Date: 2020-06-19 14:43:10
 * @LastEditors: 巢琦珑
 * @LastEditTime: 2021-07-17 14:04:59
-->

<template>
<div> 
    <div id="container1">
   <!-- 1.引入echarts资源
   2.提供容器
   3.初始化实例
   4.配置项
   5. -->
 </div>
 <div class="hello"></div>
      <!-- echarts 初始化 -->
      <div id="content" ref="mapbox"></div>
 </div>

 
</template>

<script>
import*as echarts from 'echarts';
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
  title: {
    text: "中国各地区疫情增长率",
    link: 'https://www.baidu.com',
    subtext: "shinuia",
    sublink: "https://www.baidu.com"
  },
  series: [{
    name: '确诊人数',
    type: 'map',
    map: 'china',
    label: {
      show: true,
      color: '#ffffff',
      fontSize: 8
    },
    itemStyle: {
      areaColor: '#eee'
    },
    roam: true,
    zoom: 1.2,
    emphasis: {
      label: {
        color: '#fff',
        fontSize: 12,
      },
      itemStyle: {
        areaColor: '#83b5e7'
      }
    },
    data: []
  }],
  // {name: xxx, value: xxx}
  visualMap: [{
    type: 'piecewise',
    show: true,
    pieces: [
      { min: 10000 },
      { min: 1000, max: 9999 },
      { min: 100, max: 999},
      { min: 10, max: 99 },
      { min: 1, max: 9 }
    ],
    // align: 'right'
    // showLabel: false
    inRange: {
      symbol: 'rect',
      color: [
        '#ffc0b1',
        '#9c0505',
      ]
    },
    itemWidth: 20
  }],
  tooltip: {
    trigger: 'item'
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  }
  
}
export default {
 data() {
 return {
 };
 },
 computed: {},
 methods: {
   draw1(){
     var chartDom = document.getElementById('container1');
var myChart = echarts.init(chartDom);
var option;

var colors = ['#5470C6', '#EE6666'];

option = {
    color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['疫情疑似增长率', '疫情确诊增长率']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '确诊增长率  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2020-1-21', '2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25', '2020-1-26', '2020-1-27', '2020-1-28', '2020-1-29', '2020-1-30', '2020-2-1','2020-2-2' ]
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '疑似增长率    ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2020-1-21', '2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25', '2020-1-26', '2020-1-27', '2020-1-28', '2020-1-29', '2020-1-30', '2020-2-1','2020-2-2']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '疫情疑似增长率',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [161, 73, 86, 71, 42, 82, 34, 32, 30, 25, 19, 14]
        },
        {
            name: '疫情确诊增长率',
            type: 'line',
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [101, 44, 40, 55, 51, 38, 63, 31, 27, 25, 22, 22]
        }
    ]
};

option && myChart.setOption(option);
},
getData () {
        jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
      // jsonp('../../utils/data.json', {}, (err, data) =>{
        if (!err) {
          // eslint-disable-next-line no-console
          console.log(data)
          let list = data.data.list.map(item => (
            // eslint-disable-next-line no-console
            // console.log(item),
            {
            name: item.name,
            value: item.value,
            susNum: item.susNum
          }))
          option.series[0].data = list
          this.mapcharts.setOption(option)
        }
      })
    },
 },
 created() {},
 mounted() {
   this.draw1()
     this.getData();
    this.mapcharts = echarts.init(this.$refs.mapbox);
    this.mapcharts.setOption(option);
   
 }
};


</script>
<style scoped>
#container1,#content{
  width: 50%;
  height: calc((200vh - 100px) / 2);
  background-color:pink;
  float: left;
  }
  

</style>